<template>
	<div class="runThePartyStrictly">
		<x-header :left-options="{backText: ''}">从严治党</x-header>		
		<!--数据加载动画 start-->
		<div class="loadingBox" v-show="status == 0">
			<div class="loading">
				<div>loading..</div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--数据加载动画 end-->
		
		<!--数据加载完成 start-->
		<div class="loadingOver" v-show="status == 1">
			<tab>
		      	<tab-item selected @on-item-click="onItemClick" class="selectBtn">上级政策</tab-item>
		      	<tab-item @on-item-click="onItemClick" class="selectBtn">清风颂廉</tab-item>
		      	<tab-item @on-item-click="onItemClick" class="selectBtn">警钟长鸣</tab-item>
		   	</tab>
		   	<!--上级政策 start-->
		   	<ul class="dataForm" v-if="indexPage == 0">
				<li class="dataList" v-for="dataList in higherPolicyForm">
					<div class="dataList-title" v-text="dataList.XXTitle">庞村镇组织观看河南省纪念长征胜利80周年大会现场直播</div>
					<div class="dataList-info">
						<div class="fl" v-text="dataList.UpdateDate.substr(0,10)">2018/10/10</div>
						<div class="fr">已阅：<span v-text="exchangeArray(dataList.ReadUserName)">1</span>次</div>
						<div class="clear"></div>
					</div>
					<div class="dataList-touchArea" :data-Id="dataList.ID" @click="higherPolicyDetail"></div>
				</li>
				<li class="loadMore" v-if="higherPolicyFormLength > 8" @click="higherPolicyFormMore" v-text="loadMoreText"></li>
			</ul>
			<!--上级政策 end-->
			
			 <!--清风颂廉 start-->
		   	<ul class="dataForm" v-if="indexPage == 1">
				<li class="dataList" v-for="dataList in breezeForm">
					<div class="dataList-title" v-text="dataList.XXTitle">庞村镇组织观看河南省纪念长征胜利80周年大会现场直播</div>
					<div class="dataList-info">
						<div class="fl" v-text="dataList.UpdateDate.substr(0,10)">2018/10/10</div>
						<div class="fr">已阅：<span v-text="exchangeArray(dataList.ReadUserName)">1</span>次</div>
						<div class="clear"></div>
					</div>
					<div class="dataList-touchArea" :data-Id="dataList.ID" @click="breezeDetail"></div>
				</li>
				<li class="loadMore" v-if="breezeFormLength > 8" @click="breezeFormMore" v-text="loadMoreText"></li>
			</ul>
			<!--清风颂廉 end-->
			
			<!--警钟长鸣 start-->
		   	<ul class="dataForm" v-if="indexPage == 2">
				<li class="dataList" v-for="dataList in alarmForm">
					<div class="dataList-title" v-text="dataList.XXTitle">庞村镇组织观看河南省纪念长征胜利80周年大会现场直播</div>
					<div class="dataList-info">
						<div class="fl" v-text="dataList.UpdateDate.substr(0,10)">2018/10/10</div>
						<div class="fr">已阅：<span v-text="exchangeArray(dataList.ReadUserName)">1</span>次</div>
						<div class="clear"></div>
					</div>
					<div class="dataList-touchArea" :data-Id="dataList.ID" @click="alarmDetail"></div>
				</li>
				<li class="loadMore" v-if="alarmFormLength > 8" @click="alarmFormMore" v-text="loadMoreText"></li>
			</ul>
			<!--警钟长鸣 end-->
			
		</div>
		<!--数据加载完成 end-->
		<commonFooter :activeIndex="2"></commonFooter>		
	</div>
</template>

<script>
	import Api from 'assets/js/api';
	import commonFooter from './common/footer';
	import { XHeader, Actionsheet, TransferDom } from 'vux'
	import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'

	var api = new Api();
	var result = localStorage.getItem('result');
	var actionList = ['CYZD_GETSJZCLIST','CYZD_GETQFSLLIST','CYZD_GETJZCMLIST'];
	export default {
		name: 'runThePartyStrictly',
		created() {
			var self = this;
			var selectBtnGroup = document.querySelectorAll('.selectBtn');
			//默认加载的是上级政策列表的信息
			for(var i = 0; i < selectBtnGroup.length; i++){
				if(selectBtnGroup[i].classList.contains('vux-tab-selected')){
					console.log(actionList[i]);
					self.actionName = actionList[i];
				}
			}
			api.post(api.url.runThePartyStrictly, {
				Action: self.actionName,
				p: 1,
				pagecount: 8,
				szhlcode: result
			}).then((response) => {
				console.log(response)
				self.higherPolicyForm = response.data.Result;
				self.higherPolicyFormLength = response.data.Result1;
				self.breezeForm = response.data.Result;
				self.breezeFormLength = response.data.Result1;
				self.alarmForm = response.data.Result;
				self.alarmFormLength = response.data.Result1;
				if(response.status == 200){
					this.status = 1;
				}
			}).catch((error) => {
				console.log(error);
			});
		},
		activated() {
			var self = this;
			var selectBtnGroup = document.querySelectorAll('.selectBtn');
			//默认加载的是上级政策列表的信息
			for(var i = 0; i < selectBtnGroup.length; i++){
				if(selectBtnGroup[i].classList.contains('vux-tab-selected')){
					console.log(actionList[i]);
					self.actionName = actionList[i];
				}
			}
			api.post(api.url.runThePartyStrictly, {
				Action: self.actionName,
				p: 1,
				pagecount: 8,
				szhlcode: result
			}).then((response) => {
				console.log(response)
				self.higherPolicyForm = response.data.Result;
				self.higherPolicyFormLength = response.data.Result1;
				self.breezeForm = response.data.Result;
				self.breezeFormLength = response.data.Result1;
				self.alarmForm = response.data.Result;
				self.alarmFormLength = response.data.Result1;
				if(response.status == 200){
					this.status = 1;
				}
			}).catch((error) => {
				console.log(error);
			});
		},
		data() {
			return {
				status:'1',//默认加载状态为0
				higherPolicyFormPage:1,//初始默认higherPolicyForm为加载第一页，往后每点击一次加载更多则增加一页
				higherPolicyForm:[],//上级政策信息接收
				higherPolicyFormLength:'',//上级政策信息的总长度
				breezeFormPage:1,//初始默认breezeForm为加载第一页，往后每点击一次加载更多则增加一页
				breezeForm:[],//清风颂廉信息接收
				breezeFormLength:'',//清风颂廉信息的总长度
				alarmFormPage:1,//初始默认breezeForm为加载第一页，往后每点击一次加载更多则增加一页
				alarmForm:[],//警钟长鸣信息接收
				alarmFormLength:'',//警钟长鸣信息的总长度
				indexPage:'0',//默认Tab栏为第一页
				loadMoreText:'点击加载更多',
				actionName:'',//ajax的action的名称
			}
		},
		components: {
			commonFooter,
			XHeader,
		    Actionsheet,
			Tab,
		    TabItem,
		    Sticky,
		    Divider,
		    XButton,
		    Swiper,
		    SwiperItem
		},
		methods: {
			onItemClick (index) {
				this.indexPage = index;
				var self = this;
				if(self.indexPage == 0){
					this.status = 0;
					api.post(api.url.runThePartyStrictly, {
						Action: 'CYZD_GETSJZCLIST',
						p: 1,
						pagecount: 8,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.higherPolicyForm = response.data.Result;
						self.higherPolicyFormLength = response.data.Result1;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
				}else if(self.indexPage == 1){
					/*if(self.breezeForm.length == 0){*/
					this.status = 0;
					api.post(api.url.runThePartyStrictly, {
						Action: 'CYZD_GETQFSLLIST',
						p: 1,
						pagecount: 8,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.breezeForm = response.data.Result;
						self.breezeFormLength = response.data.Result1;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
					/*}*/
				}else if(self.indexPage == 2){
					/*if(self.alarmForm.length == 0){*/
					this.status = 0;
					api.post(api.url.runThePartyStrictly, {
						Action: 'CYZD_GETJZCMLIST',
						p: 1,
						pagecount: 8,
						szhlcode: result
					}).then((response) => {
						console.log(response)
						self.alarmForm = response.data.Result;
						self.alarmFormLength = response.data.Result1;
						if(response.status == 200){
							this.status = 1;
						}
					}).catch((error) => {
						console.log(error);
					});
					/*}*/
				}
			},
			higherPolicyFormMore(){
				this.higherPolicyFormPage += 1;
				var self = this;
				this.loadMoreText = '正在加载中···';
				api.get(api.url.index,{ 
					params:{
						Action: 'CYZD_GETSJZCLIST',
						p: self.higherPolicyFormPage,
						pagecount: (self.higherPolicyFormLength - self.higherPolicyFormPage * 8) > 0 ? 8 : 8 - Math.abs(self.higherPolicyFormLength - self.higherPolicyFormPage * 8),
						szhlcode: result
					}
				}).then(response=>{ 
					self.higherPolicyForm = self.higherPolicyForm.concat(response.data.Result);
					self.loadMoreText = '点击加载更多';
					if(response.status == 200){
						this.status = 1;
					}
				}).catch(err=>{ 
					console.log(err);
					this.loadMoreText = '点击加载更多';
				});
				if(this.higherPolicyForm.length == this.higherPolicyFormLength){
					this.loadMoreText = '信息已经更新为最新的了！';
				}
			},
			breezeFormMore(){
				this.breezeFormPage += 1;
				var self = this;
				this.loadMoreText = '正在加载中···';
				api.get(api.url.index,{ 
					params:{
						Action: 'CYZD_GETQFSLLIST',
						p: self.breezeFormPage,
						pagecount: (self.breezeFormLength - self.breezeFormPage * 8) > 0 ? 8 : 8 - Math.abs(self.breezeFormLength - self.breezeFormPage * 8),
						szhlcode: result
					}
				}).then(response=>{ 
					self.breezeForm = self.breezeForm.concat(response.data.Result);
					self.loadMoreText = '点击加载更多';
					if(response.status == 200){
						this.status = 1;
					}
				}).catch(err=>{ 
					console.log(err);
					this.loadMoreText = '点击加载更多';
				});
				if(this.breezeForm.length == this.breezeFormLength){
					this.loadMoreText = '信息已经更新为最新的了！';
				}
			},
			alarmFormMore(){
				this.alarmFormPage += 1;
				var self = this;
				this.loadMoreText = '正在加载中···';
				api.get(api.url.index,{ 
					params:{
						Action: 'CYZD_GETJZCMLIST',
						p: self.alarmFormPage,
						pagecount: (self.alarmFormLength - self.alarmFormPage * 8) > 0 ? 8 : 8 - Math.abs(self.alarmFormLength - self.alarmFormPage * 8),
						szhlcode: result
					}
				}).then(response=>{ 
					self.alarmForm = self.alarmForm.concat(response.data.Result);
					self.loadMoreText = '点击加载更多';
					if(response.status == 200){
						this.status = 1;
					}
				}).catch(err=>{ 
					console.log(err);
					this.loadMoreText = '点击加载更多';
				});
				if(this.alarmForm.length == this.alarmFormLength){
					this.loadMoreText = '信息已经更新为最新的了！';
				}
			},
			exchangeArray(val) {
				var Array = val.split(",");
				return Array.length;
			},
			higherPolicyDetail(event){
				this.status = 0;
				localStorage.removeItem("higherPolicyDetailTitle");
				localStorage.removeItem("higherPolicyDetailInfo");
				var self = this;
				var dataId = event.target.getAttribute('data-id');
				var higherPolicyDetailTitle;
				var higherPolicyDetailInfo;
				console.log(dataId);
				for(var i = 0;i < self.higherPolicyForm.length; i++){
					if(parseInt(dataId) == self.higherPolicyForm[i].ID){
						self.detailTitle = self.higherPolicyForm[i].XXTitle;
						var firstExchange = api.firstExchange(self.higherPolicyForm[i].XXContent);
						self.detailInfo = api.secondExchange(firstExchange);
						higherPolicyDetailTitle = self.detailTitle;
						higherPolicyDetailInfo = self.detailInfo;
					}
				}
				console.log(higherPolicyDetailTitle);
				localStorage.setItem("higherPolicyDetailTitle",higherPolicyDetailTitle);
				localStorage.setItem("higherPolicyDetailInfo",higherPolicyDetailInfo);
				api.post(api.url.index, {
					Action: 'CYZD_UPDATESJZCREADUSER',
					p1:dataId,
					szhlcode: result
				}).then((response) => {
					console.log(response);
					this.status = 1;
					self.$router.push('/higherPolicyDetail');
				}).catch((error) => {
					console.log(error);
				});
			},
			breezeDetail(event){
				this.status = 0;
				localStorage.removeItem("breezeDetailTitle");
				localStorage.removeItem("breezeDetailInfo");
				var self = this;
				var dataId = event.target.getAttribute('data-id');
				var breezeDetailTitle;
				var breezeDetailInfo;
				console.log(dataId);
				for(var i = 0;i < self.breezeForm.length; i++){
					if(parseInt(dataId) == self.breezeForm[i].ID){
						self.detailTitle = self.breezeForm[i].XXTitle;
						var firstExchange = api.firstExchange(self.breezeForm[i].XXContent);
						self.detailInfo = api.secondExchange(firstExchange);
						breezeDetailTitle = self.detailTitle;
						breezeDetailInfo = self.detailInfo;
					}
				}
				console.log(breezeDetailTitle);
				localStorage.setItem("breezeDetailTitle",breezeDetailTitle);
				localStorage.setItem("breezeDetailInfo",breezeDetailInfo);
				api.post(api.url.index, {
					Action: 'CYZD_UPDATEQFSLREADUSER',
					p1:dataId,
					szhlcode: result
				}).then((response) => {
					console.log(response);
					this.status = 1;
					self.$router.push('/breezeDetail');
				}).catch((error) => {
					console.log(error);
				});
			},
			alarmDetail(event){
				this.status = 0;
				localStorage.removeItem("alarmDetailTitle");
				localStorage.removeItem("alarmDetailInfo");
				var self = this;
				var dataId = event.target.getAttribute('data-id');
				var alarmDetailTitle;
				var alarmDetailInfo;
				console.log(dataId);
				for(var i = 0;i < self.alarmForm.length; i++){
					if(parseInt(dataId) == self.alarmForm[i].ID){
						self.detailTitle = self.alarmForm[i].XXTitle;
						var firstExchange = api.firstExchange(self.alarmForm[i].XXContent);
						self.detailInfo = api.secondExchange(firstExchange);
						alarmDetailTitle = self.detailTitle;
						alarmDetailInfo = self.detailInfo;
					}
				}
				console.log(alarmDetailTitle);
				localStorage.setItem("alarmDetailTitle",alarmDetailTitle);
				localStorage.setItem("alarmDetailInfo",alarmDetailInfo);
				api.post(api.url.index, {
					Action: 'CYZD_UPDATEJZCMREADUSER',
					p1:dataId,
					szhlcode: result
				}).then((response) => {
					console.log(response);
					this.status = 1;
					self.$router.push('/alarmDetail');
				}).catch((error) => {
					console.log(error);
				});
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.runThePartyStrictly {
		height: 100%;
	}
	
	.vux-header{
		background-color: #f00 !important;
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 2000;
		width: 100%;
	}
	.vux-header .vux-header-left{
		color: #fff;
	}
	.vux-header .vux-header-left .left-arrow:before{
		border: 2px solid #fff !important;
    	border-width: 2px 0 0 2px !important;
	}
	.vux-tab{
		padding-top: 46px;
	}
	.vux-tab .vux-tab-item.vux-tab-selected{
		color: #f00 !important;
    	border-bottom: 3px solid #f00 !important;
	}
	.vux-tab-ink-bar{
		background-color: #f00 !important;	
	}	
	.dataForm{
		width: 100%;
		display: block;
		overflow: hidden;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 0.5rem 3rem;
		overflow: scroll;
	}
	.dataForm .dataList{
		width: 100%;
		display: block;
		overflow: hidden;
		border-bottom: 1px solid #e9e9e9;
		box-sizing: border-box;
		padding: 0.25rem 0;
		position: relative;
	}
	.dataList-title{
		font-size: 0.7rem;
		color: #333;
	}
	.dataList-info{
		width: 100%;
		color: #999;
		font-size: 0.5rem;
		overflow: hidden;
		margin-top: 0.5rem;
	}
	.dataList-touchArea{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.loadMore{
		font-size: 0.7rem;
	    width: 100%;
	    height: 2rem;
	    line-height: 2rem;
	    text-align: center;
	    box-sizing: border-box;
	}
	
	/*加载动画*/
	.loadingBox{
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.loading {
	    border-radius: 50%;
	    font-size: 20px;
	    height: 100px;
	    line-height: 90px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}
	.loading > div:nth-child(2) {
	    border-color: #FFF;
	    left: 0px;
	    width: 90px;
	}
	.loading > div:nth-child(3) {
	    border-color: #009933;
	    left: -5px;
	    width: 100px;
	    -webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.loading > div:nth-child(2), .loading > div:nth-child(3) {
	    background-color: rgba(255, 255, 255, 0.2);
	    border: 5px solid #FFF;
	    border-radius: 50%;
	    box-shadow: 0 0 5px 0 #f00;
	    height: 100px;
	    position: absolute;
	    top: 0px;
	    border-top-width: 0;
	    border-bottom-width: 0;
	    -webkit-animation: anim3 2s linear infinite;
	    -moz-animation: anim3 2s linear infinite;
	    -ms-animation: anim3 2s linear infinite;
	    -o-animation: anim3 2s linear infinite;
	    animation: anim3 2s linear infinite;
	}
	@keyframes anim3{
		0% {
		    transform: rotateY(0deg);
		}
		50% {
		    transform: rotateY(180deg);
		}
		100% {
		    transform: rotateY(360deg);
		}
	}


	/*下拉刷新*/
	.scrollBox{
		padding-top: initial !important; 
		margin-top: 1.75rem;
		height: 12rem !important;
		box-sizing: border-box;
		padding-left: 0.5rem;
		background-color: #fff;
		z-index: 0;
		overflow: scroll !important;
	}
</style>